<template>
  <el-dialog
    title="自定义表头"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    width="25%"
  >
    <div class="column-content">
      <ul>
        <li class="item" v-for="(item, index) in columnList" :key="index">
          <el-checkbox class="left" v-model="item.isShow">{{
            item.label
          }}</el-checkbox>

          <div class="operate">
            <el-button
              v-if="index != 0"
              @click="sortUp(index)"
              icon="el-icon-top"
              size="mini"
              circle
            ></el-button>
            <el-button
              v-if="index != columnList.length - 1"
              @click="sortDown(index)"
              icon="el-icon-bottom"
              size="mini"
              circle
            ></el-button>
          </div>
        </li>
      </ul>
      <el-divider></el-divider>
      <div class="footer">
        <el-button size="mini" class="left-btn" @click="save">确定</el-button>
        <el-button size="mini" @click="close">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "SetColumn",
  props: ["dialogVisible", "columnList"],
  components: {},
  data() {
    return {};
  },
  methods: {
    handleClose() {
      this.$emit("close");
    },
    sortUp(index) {
      this.$emit("move", 1, index);
      // const temp = this.columnList[index - 1];
      // this.$set(this.columnList, index - 1, this.columnList[index]);
      // this.$set(this.columnList, index, temp);
    },
    sortDown(index) {
      this.$emit("move", 2, index);
      // const temp = this.columnList[index + 1];
      // this.$set(this.columnList, index + 1, this.columnList[index]);
      // this.$set(this.columnList, index, temp);
    },
    save() {
      console.log(this.columnList);
      this.$emit("refreshColumn", this.columnList);
    },
    close() {
      this.$emit("close");
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.column-content {
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .left {
      flex: 1;
    }
    .operate {
      width: 100px;
    }
  }

  .footer {
    display: flex;
    justify-content: center;
    .left-btn {
      background-color: rgba(68, 42, 141, 1);
      color: #ffffff;
    }
    button {
      width: 80px;
      // height: 30px;
    }
  }
}
</style>
